<template>
	<view>
		<view class="bg">
			<view class="top">
				<view class="baio">
					<view class="one">
						<image src="../../images/tiyan.jpg" mode=""></image>
						<view class="ke left">
							课程
						</view>
					</view>
					<view class="one">
						<image src="../../images/dashi.jpg" mode=""></image>
						<view class="ke">
							大师课
						</view>
					</view>
					<view class="one right">
						<image src="../../images/ke.jpg" mode=""></image>
						<view class="ke">
							体验课
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="Navigation">
		<view class="title">
			<view class="title_left">
				推荐课程
			</view>
			<view class="title_right">
				全部52个课程
				<view class="iconfont icon-gengduo">
					
				</view>
			</view>
		</view>
		<view class="cont">
			
			<view class="ont" v-for="(item,index) in list" :key="index">
				<image :src="item.teacherPhoto?'http://apis.90000p.com/fkm/upload/'+item.teacherPhoto:'@/image/KFM_01.jpg'" mode=""></image>
				<view class="zi">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
	<view class="tit">
		<view class="title_left">
						今日课程
					</view>
					<view class="title_right">
						全部52个课程
						<view class="iconfont icon-gengduo">
							
						</view>
						</view>
	</view>
	<view class="nei">
	
			

		<view class="left-to" v-for="(item,index) in li" :key="index">
					<view class="tu" >
				<image :src="item.teacherPhoto?'http://apis.90000p.com/fkm/upload/'+item.teacherPhoto:'@/image/KFM_01.jpg'" mode=""></image>
					<view class="conten">
						<view class="tp">
							{{item.name}}
						</view>
						<view class="cen">
							{{item.info}}
						</view>
						<view class="rig">
							{{item.courseStartTime.substr(10,6)}}:{{item.courseEndTime.substr(10,6)}}
						</view>
					</view>
			</view>
			<view class="rg">
				预约
			</view>
		</view>
	</view>
	
	<view class="FUNKMASTERS">
		FUNK MASTERS
	</view>
	</view>
</template>

<script>
	import {coursesList} from '@/apis/index.js'
	export default {
		data() {
			return {
				query:{
					type:1,
					page:1,
					psize:4
				},
				quer:{
					type:0,
					page:1,
					psize:5
				},
				list:[],
				li:[]
			};
		},
		onLoad() {
			this.courses()
			this.abc()
		},
		methods:{
			async courses(){
				
				let str = await coursesList(this.query)
				this.list = str.data.list
				console.log(str);
			},
		async abc(){
			let str = await coursesList(this.quer)
							this.li = str.data.list
							console.log(str);
		}
		},
	
		
	}
</script>

<style lang="less">
	page{
		width: 100%;
		height: 100%;
	background-image: url(../../bg.png);
	background-size: 100% 100%;
	// background-repeat: no-repeat;
	
		
	}
.bg{
	width: 100%;
	height: 100rpx;

	.top{
		width: 100%;
		height: 450rpx;
		background-image: url(../../images/KFM_01.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
		
		.baio{
			position: absolute;
			
			height: 148rpx;
			width: 100%;
			margin-left: 10rpx;
			background-color: #1f1f1f;
			margin-top: 374rpx;
			display: flex;
			justify-content: center;
			.one{
				margin-top: 30rpx;
					// width: 60rpx;
				image{
					width: 60rpx;
					height: 60rpx;
				}
				.ke{
					text-align: center;
					color: #fff;
				}
				font-size: 20rpx;
				
			}
			.left{
				margin-right: 164rpx;
			}
			.right{
				margin-left: 164rpx;
			}
		}
	}

}
.Navigation{
	margin-top: 425rpx;
	.title{
		margin-left: 10rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		
		.title_left{
			font-size: 28rpx;
			color: #d14126;
			margin-top: 40rpx;
		}
		.title_right{
			margin-right: 10rpx;
			font-size: 20rpx;
			color: #fff;
			margin-top: 40rpx;
			display: flex;
		}
	}
	
		
	.cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 10rpx;
		margin-right: 10rpx;
		.ont{
			background-color: #1f1f1f;	
			width: 348rpx;
			image{
				width: 348rpx;
				height: 173rpx;
			}
			.zi{
				padding-top: 15rpx;
				padding-bottom: 22rpx;
				font-size: 22rpx;
				color: #fff;
				margin-left: 15rpx;
			}
			
		}
	}
}
.tit{
		margin-left: 10rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			
			.title_left{
				font-size: 28rpx;
				color: #fff;
				margin-top: 40rpx;
			}
			.title_right{
				margin-right: 10rpx;
				font-size: 20rpx;
				color: #fff;
				margin-top: 40rpx;
				display: flex;
			}
}
.nei{
	
	.left-to{
		margin-bottom: 20rpx;
		background-color: #1f1f1f;
	display: flex;
	justify-content: space-between;
		margin-left: 10rpx;
		margin-right: 10rpx;
	.tu{
		display: flex;
		
	
		image{
			padding-top: 22rpx;
			margin-left: 22rpx;
			padding-bottom: 22rpx;
			width: 104rpx;
			margin-right: 25rpx;
			height: 104rpx;
			
		}
		.conten{
			color: #cccccc;
			font-size: 20rpx;
			
		}
		.tp{
			color: #fff;
			margin-top: 22rpx;
			margin-bottom: 10rpx;
			
		}
		.cen{
			margin-bottom: 10rpx;
		}
	}
		
	.rg{
		margin-right: 30rpx;
		height: 44rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background-color: #b93c25;
		border-radius: 27rpx;
		color: #fff;
		margin-top: 80rpx;
	}
}}
	
.FUNKMASTERS{
	text-align: center;
	color: #fff;
	font-size: 12rpx;
	line-height: 96rpx;
}
</style>
